<template>
  <div>
    <heard :topshow="topshow" :cont="cont" />
    <div>
      <img
        src="https://www.pdd-fapiao.com/images/cooperation/pddweb_hztg_banner@2x.png"
        alt=""
        class="productimg"
      />
    </div>
    <div style="margin-top: 55px">
      <div id="cooperation-tabs-wrap" class="content-w">
        <button :class="changeshow ? '':'active'" @click="joinin">加盟合作</button>
        <button  :class="changeshow ? 'active':''"   @click="merchant">商务合作</button>
      </div>
      <div id="cooperation-agent-wrap">
        <div class="cooperation-intro content-w">
          <img
            src="https://www.pdd-fapiao.com/images/cooperation/pddweb-jiamenghezuo@2x.png"
            alt=""
            class="intro-img"
            v-if="!changeshow"
          />
              <img
              v-else
            src="https://www.pdd-fapiao.com/images/cooperation/pddweb-shangwuhezuo@2x.png"
            alt=""
            class="intro-img"
            
          />
          <div class="intro-text">
            <p class="intro-title" v-if="!changeshow">加盟合作</p>
            <p class="intro-title"  v-else>商务合作</p>
            <p class="intro-desc" v-if="!changeshow">
              重庆继元清科技有限公司，目前主推票芊芊电子发票相关产品，现已稳居电子发票服务商前列，且占据大片中小企业市场；合作包括产品推广，市场渠道付费推广合作，以及基于品牌广告在票芊芊服务平台推广合作需求，包括品牌广告投放，广告代理公司合作；应用市场换量合作，厂商内置，及定制版合作模式。欢迎广大品牌商、应用市场、客户端、应用厂商等与我们联系，洽谈合作。
            </p>
            <p class="intro-desc" v-else>
             重庆继元清科技有限公司，目前主推票芊芊电子发票相关产品，现已稳居电子发票服务商前列，且占据大片中小企业市场；合作包括产品推广，市场渠道付费推广合作，以及基于品牌广告在票芊芊服务平台推广合作需求，包括品牌广告投放，广告代理公司合作；应用市场换量合作，厂商内置，及定制版合作模式。欢迎广大品牌商、应用市场、客户端、应用厂商等与我们联系，洽谈合作。
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="agent-provide-wrap content-w module-wrap">
      <p class="module-title">我们为您准备了</p>
      <div class="provide-list content-w">
        <div  v-for="(item, i) in mood.provide" :key="i">
          <img :src="item.icon" alt="" class="provide-icon" />
          <div >
            <p class="provide-title">{{ item.title }}</p>
            <p class="provide-desc">
              {{ item.count }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="processbox">
      <p class="processbox-title">渠道合作伙伴申请流程</p>
      <p class="process-contact">合作电话：400 928 2689</p>
      <div class="processimg">
        <img
          src="https://www.pdd-fapiao.com/images/cooperation/pddweb_hztg_sqlc_photo@2x.png"
          alt=""
          class="cont-img"
        />
      </div>
    </div>

    <div class="candobox">
      <p class="candotitle">成为加盟商后，你可以获得</p>
      <div class="cansamll">
        <div
          class="can-item"
          style="width: 15%"
          v-for="(item, i) in mood.cando"
          :key="i"
        >
          <div class="can-item-title">
            <div class="can-item-icon">
              <img :src="item.icon" alt="" width="100%" />
            </div>
            <span>{{ item.title }}</span>
          </div>
          <p class="cna-item-desc">{{ item.count }}</p>
        </div>
      </div>
    </div>

    <div class="feedback">
      <p class="feedback-title" style="margin-bottom: 0;">留言咨询</p>
      <div class="feedback-form content-w">
        <div class="form-line">
          <div class="form-item">
            <p class="form-label">您的姓名：</p>
            <p class="form-input">
              <input type="text" maxlength="30" placeholder="请输入您的姓名" />
            </p>
          </div>
          <div class="form-item">
            <p class="form-label">您的电话：</p>
            <p class="form-input">
              <input type="text" maxlength="30" placeholder="请输入您的电话" />
            </p>
          </div>
        </div>
          <div class="form-line">
          <div class="form-item">
            <p class="form-label">您的公司名称：</p>
            <p class="form-input">
              <input type="text" maxlength="30" placeholder="请输入您的公司名称" />
            </p>
          </div>
          <div class="form-item">
            <p class="form-label">您的地址：</p>
            <p class="form-input">
              <input type="text" maxlength="30" placeholder="请输入您的地址" />
            </p>
          </div>
        </div>
        <div class="form-btn">
          <button>提交咨询申请</button>
        </div>
      </div>
    </div>
    <footers />
  </div>
</template>

<script>
import heard from "@/components/heard";
import footers from "@/components/footer";
import three from "./three.data.js";
export default {
  components: {
    heard,
    footers,
  },
  data() {
    return {
      topshow: false,
      cont: 4,
      mood: three,
      changeshow:false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle);
  },
  methods: {
    joinin(){
this.changeshow=false
    },
    merchant(){
this.changeshow=true
    },
    scrollHandle(e) {
      let top = e.srcElement.scrollingElement.scrollTop; // 获取页面滚动高度
      if (top >= 500) {
        this.topshow = true;
      } else {
        this.topshow = false;
      }
    },
  },
};
</script>

<style scoped>
.processimg {
  width: 100%;
  text-align: center;
}
.cont-img {
  width: 1200px;
}
.process-contact {
  color: #fff;
  text-align: center;
  margin: 20px;
}
.processbox-title {
  font-size: 44px;
  color: #fff;
  line-height: 1.5;
  text-align: center;
}
.productimg {
  width: 100%;
}
.content-w {
  width: 100%;
  max-width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
}
#cooperation-tabs-wrap {
  text-align: center;
}
#cooperation-tabs-wrap button.active {
  background: #5486fe;
  color: #fff;
}
#cooperation-tabs-wrap button {
  font-size: 24px;
  color: #333;
  padding: 15px 50px;
  margin: 0 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  outline: 0;
}
.cooperation-intro .intro-desc {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
}
.cooperation-intro .intro-title {
  font-size: 32px;
  margin-bottom: 20px;
  color: #333;
}
.cooperation-intro .intro-text {
  padding: 0 20px;
  box-sizing: border-box;
}
.cooperation-intro .intro-img {
  width: 45%;
  height: auto;
  object-fit: contain;
  display: block;
}

.cooperation-intro {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 50px;
}
.module-title {
  font-size: 44px;
  color: #333;
  line-height: 1.5;
  text-align: center;
}
.item-icon {
  width: 64px;
}
.provide-icon {
  width: 64px;
}
.item-title {
  font-size: 22px;
  color: #333;
  line-height: 1.5;
  padding: 5px 0;
  margin: 0;
}
.provide-title {
  font-size: 22px;
  color: #333;
  line-height: 1.5;
  padding: 5px 0;
  margin: 0;
}
.item-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  text-align: left;
  width: 180px;
  margin: 0;
}
.provide-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  text-align: left;
  width: 180px;
  margin: 0;
}
.provide-list {
  display: flex;
  text-align: center;
  justify-content: space-between;
}
.processbox {
  background: url(https://www.pdd-fapiao.com/images/cooperation/pddweb_hztg_sqlc@2x.png);
  width: 100%;
  height: 364px;
  background-size: 100%;
  background-size: cover;
  padding: 20px 0;
  margin-top: 50px;
}
.can-item-desc {
  font-size: 16px;
  padding-right: 30px;
  padding-left: 80px;
  margin-top: -20px;
  color: #666;
  line-height: 1.5;
  text-align: left;
}
.can-item-icon {
  width: 64px;
  height: 64px;
  margin-right: 15px;
  background: #5486fe;
  border-radius: 50%;
  padding: 12px;
  box-sizing: border-box;
}
.can-item-title {
  font-size: 22px;
  color: #333;
  line-height: 1.5;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.can-item {
  width: 23%;
  box-sizing: border-box;
  padding: 10px 0;
  margin-bottom: 30px;
  text-align: center;
}
.candotitle {
  font-size: 44px;
  color: #333;
  line-height: 1.5;
  text-align: center;
}
.cna-item-desc {
  font-size: 16px;
  padding-right: 30px;
  padding-left: 80px;
  margin-top: -20px;
  color: #666;
  line-height: 1.5;
  text-align: left;
  width: 159px;
}
.can-item-icon {
  width: 64px;
  height: 64px;
  margin-right: 15px;
  background: #5486fe;
  border-radius: 50%;
  padding: 12px;
  box-sizing: border-box;
}
.cansamll {
  display: flex;
  justify-content: center;
}
.feedback {
  padding: 40px 0;
}
.feedback-title {
  font-size: 44px;
  color: #333;
  line-height: 1.5;
  text-align: center;
}
.feedback-form {
  margin-top: 20px;
}
.feedback-form .form-input input {
  width: 100%;
  height: 54px;
  font-size: 21px;
  color: #333;
  border: 1px solid #dadada;
  padding: 0 20px;
  border-radius: 5px;
}
.form-input {
  position: relative;
}
.feedback-form .form-label {
  font-size: 21px;
  color: #333;
  line-height: 33px;
  margin-bottom: 10px;
}
.feedback-form .form-line .form-item {
  width: 40%;
}
input {
  outline-color: #00a4ff;
}
.feedback-form .form-line {
  padding: 10px 130px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-btn button {
    min-width: 396px;
    padding: 15px 0;
    font-size: 24px;
    color: #fff;
    border: 0;
    outline: 0;
    background-color: #5486FE;
    border-radius: 50px;
    text-align: center;
}
.form-btn{
  text-align: center;
}
</style>